<template>
  <div>
    <DvBorderBox1 style="height:300px;width:600px">
      <div style="color: aliceblue;"> {{ time }}
      </div>
    </DvBorderBox1>

    <DvButton style="width: 200px;" border="Border6" color="#a6559d">智慧交通</DvButton>

    <DvPercentPond style="width:200px;height:50px;" :config="{ value: 80 }"></DvPercentPond>

    <DvDigitalFlop :config="{
      number: [num],
      content: '{nt}单',
      toFixed: 2,
    }"></DvDigitalFlop>
  </div>
</template>
<script setup>
import { BorderBox1 as DvBorderBox1, Button as DvButton, PercentPond as DvPercentPond, DigitalFlop as DvDigitalFlop } from '@kjgl77/datav-vue3';

import { ref } from 'vue'
const time = ref('');
const num = ref(0);

// 轮询
/* setInterval(()=>{
  axios.get('http://127.0.0.1:8080/abc')
},2000) */

const evtSource = new EventSource("http://127.0.0.1:8080/abc");

evtSource.onmessage = function (event) {
  const res = JSON.parse(event.data);
  num.value = res.num;
  time.value = res.time;
};
</script>

<style>
body {
  background-color: black;
}
</style>
